<template>
  <div class="process-engineer-home">
    <el-card class="welcome-card">
      <template #header>
        <div class="welcome-header">
          <el-icon class="header-icon"><Setting /></el-icon>
          <span>工艺工程师工作台</span>
        </div>
      </template>
      
      <div class="welcome-content">
        <h2 class="welcome-title">欢迎使用质检标准管理系统</h2>
        <p class="welcome-subtitle">您可以在这里管理原材料、半成品和成品的质检标准</p>
        <div class="welcome-decoration">
          <div class="decoration-circle"></div>
          <div class="decoration-circle"></div>
          <div class="decoration-circle"></div>
        </div>
      </div>
    </el-card>
    
    <!-- 功能模块卡片 -->
    <div class="section-title">
      <el-icon><Menu /></el-icon>
      <span>功能模块</span>
    </div>
    
    <div class="module-grid">
      <el-card class="module-card raw-material" @click="navigateTo('/process-engineer/raw-material-standard')">
        <div class="module-content">
          <div class="module-icon">
            <el-icon><Box /></el-icon>
          </div>
          <div class="module-info">
            <h3>原材料质检标准录入</h3>
            <p>管理LED芯片、荧光粉、封装胶等原材料的质检标准</p>
            <div class="module-stats">
              <span class="stats-item">
                <el-icon><Document /></el-icon>
                总标准数: {{ rawMaterialStats.total }}
              </span>
              <span class="stats-item">
                <el-icon><Check /></el-icon>
                已启用: {{ rawMaterialStats.enabled }}
              </span>
            </div>
            <el-progress 
              :percentage="getEnablePercentage(rawMaterialStats)" 
              :color="getProgressColor(rawMaterialStats)" 
              :format="format"
              class="stats-progress"
              :stroke-width="8"
            />
          </div>
          <div class="module-arrow">
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="module-card semi-finished" @click="navigateTo('/process-engineer/semi-finished-standard')">
        <div class="module-content">
          <div class="module-icon">
            <el-icon><Tools /></el-icon>
          </div>
          <div class="module-info">
            <h3>半成品质检标准录入</h3>
            <p>管理固晶、焊线、封装等半成品工艺的质检标准</p>
            <div class="module-stats">
              <span class="stats-item">
                <el-icon><Document /></el-icon>
                总标准数: {{ semiFinishedStats.total }}
              </span>
              <span class="stats-item">
                <el-icon><Check /></el-icon>
                已启用: {{ semiFinishedStats.enabled }}
              </span>
            </div>
            <el-progress 
              :percentage="getEnablePercentage(semiFinishedStats)" 
              :color="getProgressColor(semiFinishedStats)" 
              :format="format"
              class="stats-progress"
              :stroke-width="8"
            />
          </div>
          <div class="module-arrow">
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="module-card finished-product" @click="navigateTo('/process-engineer/finished-product-standard')">
        <div class="module-content">
          <div class="module-icon">
            <el-icon><Star /></el-icon>
          </div>
          <div class="module-info">
            <h3>成品质检标准录入</h3>
            <p>管理LED灯泡、灯管、面板灯等成品的质检标准</p>
            <div class="module-stats">
              <span class="stats-item">
                <el-icon><Document /></el-icon>
                总标准数: {{ finishedProductStats.total }}
              </span>
              <span class="stats-item">
                <el-icon><Check /></el-icon>
                已启用: {{ finishedProductStats.enabled }}
              </span>
            </div>
            <el-progress 
              :percentage="getEnablePercentage(finishedProductStats)" 
              :color="getProgressColor(finishedProductStats)" 
              :format="format"
              class="stats-progress"
              :stroke-width="8"
            />
          </div>
          <div class="module-arrow">
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 统计概览 -->
    <div class="section-title">
      <el-icon><DataAnalysis /></el-icon>
      <span>质检标准统计概览</span>
    </div>
    
    <el-card class="overview-card">
      <div class="overview-content">
        <div class="overview-item">
          <div class="overview-icon total">
            <el-icon><Files /></el-icon>
          </div>
          <div class="overview-info">
            <div class="overview-number total">{{ totalStandards }}</div>
            <div class="overview-label">总标准数</div>
          </div>
        </div>
        <div class="overview-item">
          <div class="overview-icon enabled">
            <el-icon><Select /></el-icon>
          </div>
          <div class="overview-info">
            <div class="overview-number enabled">{{ totalEnabled }}</div>
            <div class="overview-label">已启用标准</div>
          </div>
        </div>
        <div class="overview-item">
          <div class="overview-icon disabled">
            <el-icon><CloseBold /></el-icon>
          </div>
          <div class="overview-info">
            <div class="overview-number disabled">{{ totalDisabled }}</div>
            <div class="overview-label">已停用标准</div>
          </div>
        </div>
        <div class="overview-item">
          <div class="overview-icon rate">
            <el-icon><Histogram /></el-icon>
          </div>
          <div class="overview-info">
            <div class="overview-number rate">{{ enabledRate }}%</div>
            <div class="overview-label">启用率</div>
            <el-progress 
              :percentage="enabledRate" 
              :color="enabledRateColor" 
              class="rate-progress"
              :stroke-width="8"
            />
          </div>
        </div>
      </div>
    </el-card>
    
    <!-- 快速操作 -->
    <div class="section-title">
      <el-icon><Lightning /></el-icon>
      <span>快速操作</span>
    </div>
    
    <el-card class="quick-actions-card">
      <div class="quick-actions">
        <el-button type="primary" size="large" @click="navigateTo('/process-engineer/raw-material-standard', true)" class="action-button">
          <div class="button-icon">
            <el-icon><Plus /></el-icon>
          </div>
          <div class="button-text">
            <div class="button-title">新增原材料标准</div>
            <div class="button-desc">添加LED芯片、荧光粉等标准</div>
          </div>
        </el-button>
        
        <el-button type="success" size="large" @click="navigateTo('/process-engineer/semi-finished-standard', true)" class="action-button">
          <div class="button-icon">
            <el-icon><Plus /></el-icon>
          </div>
          <div class="button-text">
            <div class="button-title">新增半成品标准</div>
            <div class="button-desc">添加固晶、焊线等工艺标准</div>
          </div>
        </el-button>
        
        <el-button type="warning" size="large" @click="navigateTo('/process-engineer/finished-product-standard', true)" class="action-button">
          <div class="button-icon">
            <el-icon><Plus /></el-icon>
          </div>
          <div class="button-text">
            <div class="button-title">新增成品标准</div>
            <div class="button-desc">添加LED灯泡、灯管等标准</div>
          </div>
        </el-button>
      </div>
    </el-card>
    
    <!-- 最近活动 -->
    <div class="section-title">
      <el-icon><Timer /></el-icon>
      <span>最近活动</span>
    </div>
    
    <el-card class="recent-activities-card">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in recentActivities"
          :key="index"
          :type="activity.type"
          :color="activity.color"
          :timestamp="activity.time"
          :hollow="activity.hollow"
        >
          <div class="activity-content">
            <div class="activity-title">{{ activity.title }}</div>
            <div class="activity-desc">{{ activity.description }}</div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Setting, 
  HomeFilled, 
  Box, 
  Goods, 
  ShoppingBag, 
  Tools, 
  Star, 
  ArrowRight, 
  Document, 
  Check, 
  DataAnalysis, 
  Lightning, 
  Plus,
  Menu,
  Files,
  Select,
  CloseBold,
  Histogram,
  Timer
} from '@element-plus/icons-vue'
import { 
  getRawMaterialStatsService, 
  getSemiFinishedStatsService, 
  getFinishedStatsService,
  getRecentActivitiesService,
  type RecentActivity
} from '@/api/ProcessEngineerApi'

const router = useRouter()

// 标准统计数据
const rawMaterialStats = ref({
  total: 0,
  enabled: 0
})

const semiFinishedStats = ref({
  total: 0,
  enabled: 0
})

const finishedProductStats = ref({
  total: 0,
  enabled: 0
})

// 计算总统计
const totalStandards = computed(() => 
  rawMaterialStats.value.total + semiFinishedStats.value.total + finishedProductStats.value.total
)

const totalEnabled = computed(() => 
  rawMaterialStats.value.enabled + semiFinishedStats.value.enabled + finishedProductStats.value.enabled
)

const totalDisabled = computed(() => totalStandards.value - totalEnabled.value)

const enabledRate = computed(() => 
  totalStandards.value > 0 ? Math.round((totalEnabled.value / totalStandards.value) * 100) : 0
)

const enabledRateColor = computed(() => {
  const rate = enabledRate.value
  if (rate >= 80) return '#67c23a'
  if (rate >= 60) return '#e6a23c'
  return '#f56c6c'
})

// 获取启用百分比
const getEnablePercentage = (stats: { total: number, enabled: number }) => {
  return stats.total > 0 ? Math.round((stats.enabled / stats.total) * 100) : 0
}

// 获取进度条颜色
const getProgressColor = (stats: { total: number, enabled: number }) => {
  const percentage = getEnablePercentage(stats)
  if (percentage >= 80) return '#67c23a'
  if (percentage >= 60) return '#e6a23c'
  return '#f56c6c'
}

// 格式化进度条文本
const format = (percentage: number) => {
  return percentage + '%'
}

// 最近活动数据
const recentActivities = ref<RecentActivity[]>([])

const navigateTo = (path: string, showAddDialog: boolean = false) => {
  if (showAddDialog) {
    router.push({
      path: path,
      query: { showAddDialog: 'true' }
    })
  } else {
    router.push(path)
  }
}

onMounted(() => {
  // 初始化数据
  loadData()
})

// 加载标准统计数据和最近活动
const loadData = async () => {
  try {
    // 获取原材料标准统计数据
    const rawMaterialResponse = await getRawMaterialStatsService()
    if (rawMaterialResponse.data && rawMaterialResponse.data.records) {
      const records = rawMaterialResponse.data.records
      rawMaterialStats.value.total = records.length
      rawMaterialStats.value.enabled = records.filter((item: { standardStatus: string }) => item.standardStatus === '已启用').length
    }
    
    // 获取半成品标准统计数据
    const semiFinishedResponse = await getSemiFinishedStatsService()
    if (semiFinishedResponse.data && semiFinishedResponse.data.records) {
      const records = semiFinishedResponse.data.records
      semiFinishedStats.value.total = records.length
      semiFinishedStats.value.enabled = records.filter((item: { standardStatus: string }) => item.standardStatus === '已启用').length
    }
    
    // 获取成品标准统计数据
    const finishedResponse = await getFinishedStatsService()
    if (finishedResponse.data && finishedResponse.data.records) {
      const records = finishedResponse.data.records
      finishedProductStats.value.total = records.length
      finishedProductStats.value.enabled = records.filter((item: { standardStatus: string }) => item.standardStatus === '已启用').length
    }
    
    // 获取最近活动数据
    const activities = await getRecentActivitiesService()
    recentActivities.value = activities
  } catch (error) {
    console.error('加载数据失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.process-engineer-home {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 30px 0 15px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  padding-left: 10px;
  border-left: 4px solid #409eff;
  
  .el-icon {
    font-size: 20px;
    color: #409eff;
  }
}

.welcome-card {
  margin-bottom: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }
  
  .welcome-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    border-radius: 16px 16px 0 0;
    margin: -20px -20px 20px -20px;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 60%);
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.5s ease;
    }
    
    &:hover::before {
      opacity: 1;
      transform: scale(1);
    }
    
    .header-icon {
      font-size: 24px;
    }
  }
  
  .welcome-content {
    text-align: center;
    padding: 20px;
    position: relative;
    
    .welcome-title {
      color: #303133;
      margin-bottom: 15px;
      font-size: 28px;
      font-weight: 700;
      background: linear-gradient(to right, #667eea, #764ba2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: fadeIn 0.8s ease-in-out;
    }
    
    .welcome-subtitle {
      color: #606266;
      font-size: 16px;
      margin-bottom: 20px;
      animation: fadeIn 1s ease-in-out 0.2s both;
    }
    
    .welcome-decoration {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 20px;
      
      .decoration-circle {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #409eff;
        opacity: 0.7;
        animation: pulse 2s infinite;
        
        &:nth-child(2) {
          background: #67c23a;
          animation-delay: 0.3s;
        }
        
        &:nth-child(3) {
          background: #e6a23c;
          animation-delay: 0.6s;
        }
      }
    }
  }
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.module-card {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  border: 2px solid transparent;
  overflow: hidden;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.1), rgba(255,255,255,0));
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  
  &:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    
    &::after {
      opacity: 1;
    }
  }
  
  &.raw-material:hover {
    border-color: #409eff;
  }
  
  &.semi-finished:hover {
    border-color: #67c23a;
  }
  
  &.finished-product:hover {
    border-color: #e6a23c;
  }
  
  .module-content {
    display: flex;
    align-items: flex-start;
    padding: 25px;
    gap: 20px;
    
    .module-icon {
      width: 70px;
      height: 70px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: #fff;
      flex-shrink: 0;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease;
      
      .el-icon {
        transition: all 0.3s ease;
      }
    }
    
    .module-info {
      flex: 1;
      
      h3 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 20px;
        font-weight: 600;
        transition: color 0.3s ease;
      }
      
      p {
        margin: 0 0 15px 0;
        color: #606266;
        font-size: 14px;
        line-height: 1.5;
      }
      
      .module-stats {
        display: flex;
        gap: 20px;
        margin-bottom: 15px;
        
        .stats-item {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 14px;
          color: #606266;
          font-weight: 500;
          
          .el-icon {
            color: #409eff;
          }
        }
      }
      
      .stats-progress {
        margin-top: 5px;
      }
    }
    
    .module-arrow {
      font-size: 24px;
      color: #c0c4cc;
      transition: all 0.4s ease;
      margin-top: 20px;
    }
  }
  
  &:hover {
    .module-icon {
      transform: scale(1.1);
      
      .el-icon {
        transform: scale(1.2);
      }
    }
    
    .module-info h3 {
      color: #409eff;
    }
    
    .module-arrow {
      color: #409eff;
      transform: translateX(8px);
    }
  }
  
  &.raw-material:hover .module-info h3 {
    color: #409eff;
  }
  
  &.semi-finished:hover .module-info h3 {
    color: #67c23a;
  }
  
  &.finished-product:hover .module-info h3 {
    color: #e6a23c;
  }
}

.raw-material .module-icon {
  background: linear-gradient(135deg, #409eff, #66b1ff);
}

.semi-finished .module-icon {
  background: linear-gradient(135deg, #67c23a, #95d475);
}

.finished-product .module-icon {
  background: linear-gradient(135deg, #e6a23c, #f0c78a);
}

.overview-card {
  margin-bottom: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  }
  
  .overview-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    padding: 25px;
    
    .overview-item {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 12px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        
        &::before {
          opacity: 1;
        }
        
        .overview-icon {
          transform: scale(1.1) rotate(10deg);
        }
      }
      
      .overview-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: #fff;
        flex-shrink: 0;
        transition: all 0.3s ease;
        
        &.total {
          background: linear-gradient(135deg, #409eff, #66b1ff);
          box-shadow: 0 5px 15px rgba(64, 158, 255, 0.3);
        }
        
        &.enabled {
          background: linear-gradient(135deg, #67c23a, #95d475);
          box-shadow: 0 5px 15px rgba(103, 194, 58, 0.3);
        }
        
        &.disabled {
          background: linear-gradient(135deg, #f56c6c, #f89898);
          box-shadow: 0 5px 15px rgba(245, 108, 108, 0.3);
        }
        
        &.rate {
          background: linear-gradient(135deg, #e6a23c, #f0c78a);
          box-shadow: 0 5px 15px rgba(230, 162, 60, 0.3);
        }
      }
      
      .overview-info {
        flex: 1;
        
        .overview-number {
          font-size: 32px;
          font-weight: bold;
          margin-bottom: 5px;
          line-height: 1.2;
          
          &.total {
            color: #409eff;
          }
          
          &.enabled {
            color: #67c23a;
          }
          
          &.disabled {
            color: #f56c6c;
          }
          
          &.rate {
            color: #e6a23c;
          }
        }
        
        .overview-label {
          color: #606266;
          font-size: 14px;
          margin-bottom: 10px;
        }
        
        .rate-progress {
          margin-top: 5px;
        }
      }
    }
  }
}

.quick-actions-card {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  }
  
  .quick-actions {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 25px;
    
    .action-button {
      border-radius: 12px;
      padding: 0;
      height: auto;
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 15px;
      width: 300px;
      
      .button-icon {
        width: 50px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.2);
        padding: 15px 0;
        
        .el-icon {
          font-size: 24px;
          transition: all 0.3s ease;
        }
      }
      
      .button-text {
        flex: 1;
        text-align: left;
        padding: 15px 15px 15px 0;
        
        .button-title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 5px;
          white-space: nowrap;
        }
        
        .button-desc {
          font-size: 12px;
          opacity: 0.8;
          white-space: nowrap;
        }
      }
      
      &:hover {
        transform: translateY(-5px) scale(1.03);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        
        .button-icon .el-icon {
          transform: scale(1.2) rotate(10deg);
        }
      }
    }
  }
}

.recent-activities-card {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  }
  
  .el-timeline {
    padding: 20px;
    
    .activity-content {
      padding: 10px 0;
      
      .activity-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 5px;
      }
      
      .activity-desc {
        font-size: 14px;
        color: #606266;
      }
    }
  }
}

:deep(.el-card__header) {
  padding: 0;
}

:deep(.el-card__body) {
  padding: 20px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

@media (max-width: 1200px) {
  .module-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}

@media (max-width: 768px) {
  .module-grid {
    grid-template-columns: 1fr;
  }
  
  .overview-card .overview-content {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .quick-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .action-button {
    width: 100% !important;
  }
}
</style>